<template>
  <section class='statistics flex flex-wrap relative items-center'>
    <div class='flex flex-ul fade-before fade-after'>
      <h5 class='part-title'>寒舍足迹</h5>
      <ul class='count-num heat'>
        <li id='hot-num' class='num' title='浏览次数'>{{ viewCount }}</li>
      </ul>
      <ul class='count-num web box'>
        <li><h6>文章数据</h6><em class='num' title='文章数量' id='articleCount'></em></li>
        <li><h6>结识朋友</h6><em class='num' title='友链数量' id='friendLinkCount'></em></li>
        <li><h6>留下足迹</h6><em class='num' title='评论数量' id='commentCount'></em></li>
      </ul>
    </div>
  </section>
</template>

<script lang='ts'>
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useAppStore } from '@/stores/app'

export default defineComponent({
  name: 'Statistics',
  setup() {
    const reactiveData = reactive({
      viewCount: '' as any
    })
    const appStore = useAppStore()
    onMounted(() => {
      getStatistics()
      writeACount()
      writeFCount()
      writeCCount()
    })
    const getStatistics = () => {
      fetch('https://v6-widget.51.la/v6/KBrDrjdnMRwfJN8K/quote.js').then(res => res.text()).then((data) => {
        let title = ['最近活跃访客', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']
        let num: any = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
        reactiveData.viewCount=String(num[6]).padStart(8,'0') + '°'
        let order: any = [2, 4, 5]
        for (let i = 0; i < order.length; i++) {
          document.querySelectorAll('.web')[0].innerHTML += '<li><h6>' + title[order[i]] + '</h6><em class="num" title="访问人数">' + num[order[i]] + '</em></li>'
        }
      })
    }
    const writeACount = () => {
      const textElement:any = document.querySelector('#articleCount')
      textElement.innerHTML=appStore.articleCount
    }
    const writeFCount = () => {
      const textElement:any = document.querySelector('#friendLinkCount')
      textElement.innerHTML=appStore.friendLinkCount
    }
    const writeCCount = () => {
      const textElement:any = document.querySelector('#commentCount')
      textElement.innerHTML=appStore.commentCount
    }
    const createTextEffect = () => {
      const textElement:any = document.querySelector('#hot-num')
      const textContent = textElement.textContent
      const characters = textContent.split('')
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            textElement.innerHTML = ''
            for (let i = 0; i < characters.length; i++) {
              const character = characters[i]
              const characterElement = document.createElement('i')
              const characterTextNode = document.createTextNode(character)
              characterElement.appendChild(characterTextNode)
              characterElement.classList.add('text-effect')
              characterElement.style.animationDuration = '1s'
              characterElement.style.animationDelay = `${i * 0.1}s`
              textElement.appendChild(characterElement)
            }
            observer.disconnect()
          }
        })
      })
      observer.observe(textElement)
    }
    return {
      ...toRefs(reactiveData),
      articleCount: computed(() => appStore.articleCount),
      friendLinkCount: computed(() => appStore.friendLinkCount),
      commentCount: computed(()=> appStore.commentCount),
      createTextEffect,
      writeACount,
      writeFCount,
      writeCCount
    }
  },
  watch:{
    viewCount:function() {
      this.$nextTick(this.createTextEffect)
    },
    articleCount:function(){
      this.$nextTick(this.writeACount)
    },
    friendLinkCount:function(){
      this.$nextTick(this.writeFCount)
    },
    commentCount:function(){
      this.$nextTick(this.writeCCount)
    }
  }
})
</script>
